import { useFetch } from '@/pages/OrderModule/common/hooks/useFetch';
import { DoubleLeftOutlined } from '@ant-design/icons';
import { Collapse, Select } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import Style from '../../index.module.less';
import { useFilterFieldsConfig } from '../../store';
import FieldWrapper from '../FieldWrapper';
import { queryWarehouseList } from './server';
import {getCurrentUser} from '@/utils/authority.js';
import {
  goodsFilterItem,
  storeFilterItem,
  wareHouseFilterItem
} from '@/pages/OrderModule/orderList/components/Filter/constant.js';
import IconFont from '@/components/IconFont';

const { Panel } = Collapse;
/**
 * @desc: 筛选框：发货仓组件
 */
export const WareHouse = ({ value = {}, onChange }) => {
  const { checkingMap } = useFilterFieldsConfig();
  const [tagName, setTagName] = useState('');
  const [commitSearch, setCommitSearch] = useState('');
  const { loading, data: resp, fetch: fetchWareHouseList } = useFetch(queryWarehouseList, {}, false);
  useEffect(() => {
    fetchWareHouseList();
  }, []);

  const currentUuid = useMemo(() => {
    return getCurrentUser()?.uuid;
  }, [])
  const wareHouseList = useMemo(() => {
    if (resp && resp.data) {
      return resp.data.map((item) => ({
        label: `${item.warehouseName} (${item.uuid == currentUuid ? '自发' : '代发'})`,
        value: item.id,
      }));
    } else {
      return [];
    }
  }, [resp, commitSearch]);

  const triggerChange = (changedValue) => {
    onChange?.({ ...value, ...changedValue });
  };

  if(Object.values(storeFilterItem).every(item => checkingMap[item] === false)) {
    return <div style={{marginBottom: -6}}/>
  }
  return (
    <Collapse
      bordered={false}
      defaultActiveKey={['wareHouse']}
      expandIcon={({ isActive }) => <DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: '16px', color: '#4E5969' }} />}
      expandIconPosition="end"
      className={Style['filter-item-collapse']}
    >
      <Panel header="发货仓" collapsible="disabled" key="wareHouse" showArrow={false} className={Style['filter-item-collapse-panel']}>
        {checkingMap.warehouseId && (
          <FieldWrapper>
            <Select
              value={value.warehouseId}
              onChange={(value) => {
                triggerChange({ warehouseId: value });
              }}
              placeholder="选择发货仓"
              options={wareHouseList}
              allowClear
              clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
            />
          </FieldWrapper>
        )}
      </Panel>
    </Collapse>
  );
};

export default WareHouse;
